<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>账户管理</span>
        <el-button type="primary" plain class="float" @click="addDialogVisible = true">增加</el-button>
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="账户名称" prop="name" width="180" sortable></el-table-column>
        <el-table-column label="余额" prop="expend" width="180" sortable></el-table-column>
        <el-table-column label="说明" prop="remark" width="180"></el-table-column>
        <el-table-column label="操作" prop="remark" width="180">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="revamp(scope)">修改</el-button>
            <el-button
              size="small"
              v-if="!scope.row.importance"
              type="danger"
              @click="del(scope)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 增加 -->
    <el-dialog title="增加" :visible.sync="addDialogVisible" width="50%" center @close="closed">
      <el-form :model="revampData" :rules="DataRules" ref="addDataRef">
        <el-form-item label="名称" label-width="70px" prop="name">
          <el-input v-model="revampData.name"></el-input>
        </el-form-item>
        <el-form-item label="余额" label-width="70px" prop="expend">
          <el-input v-model="revampData.expend"></el-input>
        </el-form-item>
        <el-form-item label="说明" label-width="70px">
          <el-input v-model="revampData.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="centerDialogVisible" width="50%" center @close="closed">
      <el-form :model="revampData" :rules="DataRules" ref="revampDataRef">
        <el-form-item label="名称" label-width="70px" prop="name">
          <el-input v-model="revampData.name"></el-input>
        </el-form-item>
        <el-form-item label="余额" label-width="70px" prop="expend">
          <el-input v-model="revampData.expend"></el-input>
        </el-form-item>
        <el-form-item label="说明" label-width="70px">
          <el-input v-model="revampData.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      revampData: {},
      centerDialogVisible: false,
      addDialogVisible: false,
      DataRules: {
        name: [
          { required: true, message: "请输入账户名", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        expend: [
          {
            required: true,
            message: "请输入金额，且金额大于0",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    change() {
      this.show = !this.show;
    },
    async firstIn() {
      const { data: result } = await this.$http.get("account", {
        params: { telephone: window.sessionStorage.getItem("telephone") }
      });
      this.tableData = result.data.data;
    },
    revamp(scope) {
      this.revampData = this.tableData[scope.$index];
      this.centerDialogVisible = true;
    },
    // 修改账户
    async submit() {
      this.$refs.revampDataRef.validate(valid => {
        if (!valid) {
          return;
        }
      });
      const { data: result } = await this.$http.put("alter", this.revampData);
      if (result.errorCode != 0) {
        this.$message({
          showClose: true,
          message: "修改失败！",
          type: "warning"
        });
        return;
      }
      const { data: res } = await this.$http.get("account", {
        params: { telephone: window.sessionStorage.getItem("telephone") }
      });
      this.tableData = res.data.data;
      this.centerDialogVisible = false;
      this.$message({
        showClose: true,
        message: "修改成功！",
        type: "success"
      });
      this.revampData = [];
    },
    // 删除账户
    del(scope) {
      this.$confirm("此操作将永久删除该账户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const { data: result } = await this.$http.delete(
            "del/" + scope.row.id
          );
          if (result.errorCode != 0) {
            this.$message({
              showClose: true,
              message: "删除失败！",
              type: "warning"
            });
            return;
          }
          const { data: res } = await this.$http.get("account", {
            params: { telephone: window.sessionStorage.getItem("telephone") }
          });
          this.tableData = res.data.data;
          this.$message({
            showClose: true,
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: "已取消删除"
          });
        });
    },
    closed() {
      if (this.$refs.revampDataRef) {
        this.$refs.revampDataRef.clearValidate();
      }
      if (this.$refs.addDataRef) {
        this.$refs.addDataRef.clearValidate();
      }
      this.revampData = { name: "", expend: 0, remark: "" };
    },
    // 添加账户
    async add() {
      this.$refs.addDataRef.validate(valid => {
        if (!valid) {
          return;
        }
      });
      this.revampData.importance = 0;
      this.revampData.telephone = sessionStorage.getItem("telephone");
      const { data: result } = await this.$http.post("add", this.revampData);
      if (result.data.errorCode != 0) {
        this.$message({
          showClose: true,
          message: "添加失败！",
          type: "warning"
        });
        return;
      }
      const { data: res } = await this.$http.get("account", {
        params: { telephone: window.sessionStorage.getItem("telephone") }
      });
      this.tableData = res.data.data;
      if (!this.tableData.remark) {
        this.tableData.remark = "";
      }
      this.$message({
        showClose: true,
        message: "添加成功！",
        type: "success"
      });
      this.addDialogVisible = false;
    }
  },
  created() {
    this.firstIn();
  }
};
</script>

<style lang="less" scoped>
.box-card {
  width: 80%;
  margin: 20px auto;
}
.float {
  float: right;
  margin-top: -9px;
}
</style>